<template>
  <div class="main">
    <!-- <vo-basic :data="chartData"></vo-basic> -->
    <!-- <vo-edit :data="chartData"></vo-edit>
    <p @click="change">修改数据</p>-->
    <div class="tree">
      <div class="tree-content">
        <tree-item :tree-data="treeData" :tree-first="true" @addfn="handleClose"></tree-item>
      </div>
    </div>
    <div>{{treeData}}</div>
  </div>
</template>

<script>
import { VoBasic } from "vue-orgchart";
import { VoEdit } from "vue-orgchart";
import TreeItem from "./TreeItem";
export default {
  name: "Tree",
  components: { VoBasic, VoEdit, TreeItem },
  data() {
    return {
      treeData: [
        {
          name: "1",
          child: [
            { name: "2", child: [{ name: "1" }, { name: "2" }] },
            { name: "1", child: [{ name: "1" }, { name: "2" }] }
          ]
        }
      ]
      //   chartData: {
      //     name: "JavaScript",
      //     children: [
      //       { name: "Angular", id: "1", children: [{ name: "Preact45555" }] },
      //       {
      //         name: "React",
      //         children: [{ name: "Preact" }]
      //       },
      //       {
      //         name: "Vue",
      //         children: [{ name: "Moon" }]
      //       }
      //     ]
      //   }
    };
  },
  created() {
    // this.chartData = {
    //   name: "JavaScript",
    //   children: [
    //     { name: "Angular",id:'1' },
    //     {
    //       name: "React",
    //       children: [{ name: "Preact" }]
    //     },
    //     {
    //       name: "Vue",
    //       children: [{ name: "Moon" }]
    //     }
    //   ]
    // };
  },
  methods: {
    nodeTemplate() {
      console.log(1);
    },
    change() {
      this.chartData = {};
      this.chartData = {
        name: "JavaScript",
        children: [
          { name: "Angular", id: "1", children: [{ name: "Preact45555" }] },
          {
            name: "React",
            children: [{ name: "Preact" }]
          },
          {
            name: "Vue",
            children: [{ name: "Moon" }]
          }
        ]
      };
    },
    handleClose(index) {
        console.log(this.treeData[0].child)
    //   if (this.treeData[index].child) {
    //     this.treeData[index].child.push({ name: "1" });
    //   } else {
    //     this.$set(this.treeData[index], "child", [{ name: "1" }]);
    //   }
    }
  }
};
</script>

<style lang="scss" scoped>
.tree {
  background: #fff;
  min-height: calc(100vh - 110px);
  position: relative;
  &-content {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
  }
}
